﻿<UserControl x:Class="ItemsViewerDemo.CircularLoader"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
             x:Name="userControl">
    <UserControl.Resources>
        <Storyboard x:Key="LoaderAnimation">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(RotateTransform.Angle)"
                                           Storyboard.TargetName="canvas"
                                           RepeatBehavior="Forever">
                <EasingDoubleKeyFrame KeyTime="0"
                                      Value="0" />
                <EasingDoubleKeyFrame KeyTime="0:0:3"
                                      Value="360" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>

    <Viewbox x:Name="LayoutRoot"
             HorizontalAlignment="Left"
             VerticalAlignment="Top">
        <Canvas x:Name="canvas"
                Height="323"
                Width="308"
                RenderTransformOrigin="0.5,0.5">
            <Canvas.RenderTransform>
                <RotateTransform />
            </Canvas.RenderTransform>

            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Height="71"
                     Canvas.Left="121"
                     Canvas.Top="21"
                     Width="69"
                     Opacity="0.3" />
            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Height="71"
                     Width="69"
                     Canvas.Left="194"
                     Canvas.Top="52"
                     Opacity="0.4" />
            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Width="69"
                     Height="71"
                     Canvas.Left="221"
                     Canvas.Top="123"
                     Opacity="0.5" />
            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Width="69"
                     Height="71"
                     Canvas.Left="190"
                     Canvas.Top="198"
                     Opacity="0.6" />
            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Height="71"
                     Canvas.Left="121"
                     Canvas.Top="226"
                     Width="69"
                     Opacity="0.7" />
            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Width="69"
                     Height="71"
                     Canvas.Left="48"
                     Canvas.Top="194"
                     Opacity="0.8" />
            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Height="71"
                     Width="69"
                     Canvas.Left="17"
                     Canvas.Top="123"
                     Opacity="0.9" />
            <Ellipse Fill="{Binding Foreground, ElementName=userControl}"
                     Height="71"
                     Width="69"
                     Canvas.Left="48"
                     Canvas.Top="52"
                     Opacity="1.0" />
        </Canvas>
    </Viewbox>
</UserControl>